/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
import { Button } from "antd";
import icon from "../../image/gis_5g_station_normal.svg";
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const MapClusterOverlays: React.FC = () => {
    function componentDid() {

        esriLoader.loadModules([
            "esri/map",
            "esri/layers/FeatureLayer",
            "esri/dijit/PopupTemplate",
            "esri/dijit/Legend",
            "dojo/domReady!"
        ]).then(([Map, FeatureLayer, PopupTemplate, Point, Legend]) => {
            const map = new Map('mapCon', {
                basemap: 'topo-vector',
                center: [-73.92872, 40.71321],
                zoom: 13
            });
            var serviceUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/nyc_parks_gardens_hist_sites/FeatureServer/0";
            var layer = new FeatureLayer(serviceUrl, {
            outFields: [ "facname", "proptype", "factype", "address" ],
            featureReduction: {
                type: "cluster"
            },
            infoTemplate: new PopupTemplate({
                title: "{facname}",
                description: "{proptype} {factype} on {address}."
            })
            });
            map.addLayer(layer);

            map.on("load", function(evt: any){
                var legend = new Legend({
                    map: map,
                    layerInfos: [{
                    layer: layer,
                    title: "Parks and historic sites"
                    }]
                }, "legendDiv");
                legend.startup();
            });
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (
        <div id="mapCon">
            <div id="infoDiv">
                <div id="legendDiv"></div>
            </div>
        </div>
    )
}
